
$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")


const id = location.search.split("=")[1];
// console.log(id)
const smallimg =  document.querySelector(".small_box>img");
const bigimg =  document.querySelector(".big_box>img");
const magnifier =  document.querySelector(".magnifier");

ajax({
    url:"http://localhost:3000/api",
    data:{
        type:"getGoods"
    },
    success:res=>{
        // 2.解析数据
        res = JSON.parse(res);
        console.log(res);
        let i=0;
        res.some((val,idx)=>{
            i = idx;
            // console.log(id);
            return val.index === id;
        })
        
        // 渲染小图
        smallimg.src = res[i].bigImg;
        // 渲染大图
        bigimg.src = res[i].bigImg;
        console.log(res[i])
        // 渲染图片列表
        let str ="";
        res[i].imgs.forEach(val=>{
            str +=`<li>
                        <img src="${val}" alt="">
                    </li>`
        })
        magnifier.innerHTML = str;
        document.querySelector(".glass_right h2").innerHTML = res[i].title;
        document.querySelector(".span3").innerHTML = res[i].money;
        document.querySelector("#price").innerHTML=res[i].money;


        new Magnifier();
        // 解决异步问题，如果不放在这里面，放大镜不出现，因为异步，执行时选择器，数据还没有生成 所以需要一步一步执行（同步）

        new tabList();
    }
})




class Magnifier{
    constructor(){
        this.sBox = document.querySelector(".small_box");
        this.bBox = document.querySelector(".big_box");
        this.bImg = document.querySelector(".big_box img");
        this.sImg = document.querySelector(".small_box img");
        this.sSpan = document.querySelector(".small_box span");
        this.imgs = document.querySelectorAll(".magnifier li img");
        this.addEvent();
    }
    addEvent(){
        const that = this;
        this.sBox.onmouseenter = function(){
            that.show();
        } 
        this.sBox.onmouseleave = function(){
            that.hide();
        } 
        this.sBox.onmousemove = function(eve){
            const e = eve || window.event;
            const pos = {
                x:e.offsetX,
                y:e.offsetY
            };
        that.move(pos);
        }
        for(let i=0;i<this.imgs.length;i++){
            this.imgs[i].onclick = ()=>{
                console.log(i);
                this.bImg.src = this.sImg.src = this.imgs[i].src;
                this.imgs[i].style.border = "none"
            }
        }

    }
    show(){
        this.bBox.style.display = "block";
        this.sSpan.style.display = "block";
        this.init();
    }
    hide(){
        this.bBox.style.display = "none";
        this.sSpan.style.display = "none";
    }
    move(ops){
        
        let l = ops.x - this.sSpan.offsetWidth/2 ;
        let t = ops.y - this.sSpan.offsetHeight/2;
      
        if(l<0) l=0;
        if(t<0) t =0;
        if(l>this.sBox.offsetWidth - this.sSpan.offsetWidth){
            l=this.sBox.offsetWidth - this.sSpan.offsetWidth; 
        }
        if(t>this.sBox.offsetHeight - this.sSpan.offsetHeight){
            t=this.sBox.offsetHeight - this.sSpan.offsetHeight; 
        } 

        this.sSpan.style.left = l+"px";
        this.sSpan.style.top = t+"px";

        const x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
        const y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
        this.bImg.style.left = -x*(this.bImg.offsetWidth - this.bBox.offsetWidth) + "px";
        this.bImg.style.top = -y*(this.bImg.offsetHeight - this.bBox.offsetHeight) + "px";
    }
    init(){
        this.sSpan.style.height = (this.bBox.offsetHeight / this.bImg.offsetHeight)*this.sBox.offsetHeight +"px";
        this.sSpan.style.width = (this.bBox.offsetWidth / this.bImg.offsetWidth)*this.sBox.offsetWidth +"px";
    }
}





class tabList{
    constructor(){
        this.mSpan = document.getElementById('model').getElementsByTagName('span');
        this.cSpan = document.getElementById('color').getElementsByTagName('span');
        this.rSpan = document.getElementById('rom').getElementsByTagName('span');
        this.bSpan = document.getElementById('banben').getElementsByTagName('span');

        this.aSpan = document.getElementsByTagName('span');
        this.oModel = document.getElementById('model');
        this.oRom = document.getElementById('rom');
        this.oPrice = document.getElementById('price');
        this.mSpan[0].className = 'on';
        this.cSpan[0].className = 'on';
        this.rSpan[0].className = 'on';
        this.bSpan[0].className = 'on';
        this.addEvent()
    }


    addEvent(){
        for (var i=0;i<this.aSpan.length;i++ ){
            
            this.aSpan[i].onclick = function(){
                var siblings = this.parentNode.children;
                for (var j=0;j<siblings.length;j++ )
                {
                    siblings[j].className = '';
                }
                this.className = 'on';
                
                if ( this.parentNode == this.oModel || this.parentNode == this.oRom )
                {
                    price();
                }
            };
        };
    }
        price(){
            var p1 = 0;
            var p2 = 0;
            for (var i=0;i<this.mSpan.length;i++ )
            {
                if ( this.mSpan[i].className == 'on' )
                {
                    // p1 = i?3299:2199;
                    // break;

                    switch ( i )
                    {
                        case 0:
                            p1 = 2199;
                            break;
                        case 1:
                            p1 = 2299;
                            break;
                        case 2:
                            p1 = 2399;
                            break;
                        case 3:
                            p1 = 2499;
                            break;
                        case 4:
                            p1 = 3599;
                            break;
                    }
                };
            };
            for (var i=0;i<this.rSpan.length;i++ )
            {
                if ( this.rSpan[i].className == 'on' )
                {
                    switch ( i )
                    {
                        case 0:
                            p2 = 0;
                            break;
                        case 1:
                            p2 = 400;
                            break;
                        case 2:
                            p2 = 800;
                            break;
                    }
                }
            };
            oPrice.innerHTML = p1+p2;
        };
}





